<template>
	<div class="softwareBox">
		<div class="softwareTop">
			<img :src="getImgPath(detailInfo.headImag)" alt="" class="softwareLeft" />
			<div class="softwareRight">
				<p class="p1 flowHidden">{{ detailInfo.title }}</p>
				<span class="p4" @click="downLoadFile">立即下载</span>
			</div>
		</div>
		<div class="softwareBtm">
			<div class="softwareBtms">
				<p class="p1">版本</p>
				<p class="p2">{{ detailInfo.detailObj?.inputinputdYU2 }}</p>
			</div>
			<div class="softwareBtms">
				<p class="p1">更新时间</p>
				<p class="p2">{{ detailInfo.detailObj?.dateTimedateTimeHb8I?.substring(0, 10) }}</p>
			</div>
			<div class="softwareBtms">
				<p class="p1">大小</p>
				<p class="p2">{{ detailInfo.detailObj?.enclosureUpload?.length?detailInfo.detailObj?.enclosureUpload.[0]?.resourceSize : '未知' }}</p>
			</div>
			<div class="softwareBtms">
				<p class="p1">平台</p>
				<p class="p2">{{ detailInfo.detailObj?.inputinputki21 }}</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		detailInfo: {
			type: Object,
			default: { detailObj: {} }
		}
	},

	data() {
		return {
			query: GetQueryString(),
			imgPath:imgPath,
		};
	},
	mounted() {
		this.$nextTick(() => {
			console.log(this.detailInfo, 'detailInfo');
		});
	},
	methods: {
		tabsClick(val) {
			this.active = val;
		},
		downLoadFile() {
			let param = {
				contentId: this.query.id,
				resIds: this.detailInfo.detailObj.enclosureUpload[0]?.id
			};
			contentApi.downloadAnnexs(param, res => {
				downloadFile(res.data, this.detailInfo.title + '.zip');
			});
		},
		getImgPath(url){
			return imgPath(url);
		},
	}
};
</script>

<style>
.softwareBox {
	width: 840px;
	padding-bottom: 24px;
	border-bottom: 1px solid #efefef;
}
.softwareTop {
	background: #ffffff;
	display: flex;
	cursor: pointer;
}
.softwareTop .softwareLeft {
	width: 100px;
	height: 100px;
}
.softwareTop .softwareRight {
	margin-left: 24px;
	height: 48px;
}

.softwareRight.p1 {
	cursor: pointer;
	height: 24px;
	font-size: 24px;
	line-height: 24px;
	font-weight: 600;
	color: #000000;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.softwareRight .p4 {
	display: inline-block;
	cursor: pointer;
	margin-top: 24px;
	padding: 12px 48px;
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;
	line-height: 14px;
	background: #3ace72;
	border-radius: 4px;
}

.softwareRight .p4 :hover {
	background: #60db8b;
}

.softwareTop .softwareRight .p4 :active {
	background: #27a85d;
}
.softwareBtm {
	display: flex;
	margin-top: 40px;
}
.softwareBtms {
	width: 180px;
}
.softwareBtms .p1 {
	height: 14px;
	font-size: 14px;
	font-weight: 400;
	color: #999999;
	line-height: 14px;
}
.softwareBtms .p2 {
	margin-top: 8px;
	height: 14px;
	font-size: 14px;
	font-weight: 400;
	color: #333;
	line-height: 14px;
}
</style>
